import React, { Component } from 'react'
import { Checkbox, Stepper } from 'antd-mobile'
import { FormattedMessage } from 'react-intl'
import { helper, config, myFetch } from '../utils'

export default class LimitOrStopPrice extends Component {
	constructor(props) {
		super(props)
		this.state = {
			newprice: props.price,
			ccy: props.ccy
		}
	}
	onChange = (e) => {
		//console.log(e)
	    this.setState({
	    	newprice: e
	    }, () => {
	    	this.props.onChange(this.state.newprice)
	    })
	}
	componentWillReceiveProps(nextProps) {
	   //console.log(nextProps.price)
	   if (nextProps.price != this.props.newprice && nextProps.ccy != this.props.ccy) {
	     this.setState({
	       newprice: nextProps.price,
	       ccy: nextProps.ccy
	     })
	   }
	 }
	stepCcy = (ccy) => {
		let result = 0.00001
	   if (ccy) {
	   	 if (ccy.includes('JPY')) {
	   	 	result = 0.001
	   	 } else {
	   	 	result = 0.00001
	   	 }
	   }
	   return result
	}
	render() {
		const { price, className, defaultCon } = this.props
		//console.log(price, 'price')
		return (
			<div className={`rt-limit-stop ${className} ? ${className} : ''`}>
				<div className="-condirection-type">
					<div className={`-left -active -ratio`}>
						<Checkbox
						  checked={true}
						  disabled={true}
						/>
						<FormattedMessage id={`${defaultCon == 3 ? 'limit' : 'stop'}`}/>
					</div>
				</div>
				<div className={`rt-price-item`}>
		          <span className="-wrap-left">
		          	  <FormattedMessage id="price"/>
		          </span>
		          <div className="-wrap-price-right">
			         <Stepper
			            className="rt-order-stepper"
			            onChange={this.onChange}
			            defaultValue={this.props.price}
			            value={this.state.newprice}
			            step={this.stepCcy(this.state.ccy)}
			            showNumber
			         />
			      </div>
		      </div>
			</div>
			)
	}
}